import React from 'react'
import { useIntl,connect, ConnectProps} from 'umi';
import { CloseSquareOutlined, EditOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons'
import { PageContainer } from '@ant-design/pro-layout'
import { Button, Table } from 'antd'
import { ColumnsType } from 'antd/es/table/interface';
import EditForm from './components/EditForm';
import Search from './components/Search'
//import PopDelete from './components/PopDelete';
import { useEffect } from 'react';
import Recent from './components/Recent';
interface PageProps extends ConnectProps {
    info:any
}
const ClientInfo: React.FC<PageProps> = (props) => {
    const { dispatch } = props
    const {list}=props.info
    const intl = useIntl();
    useEffect(() => {
        dispatch({
            type:"clientInfo/loadData",
            payload:{
            }
        })
        dispatch({
            type: "clientInfo/save",
            payload: {
                showEdit: false,
                showSearch:false,
                current: {},
                isEdit:false
            }
        })
    }, [])
    console.log(list)

    const columns: ColumnsType<object> = [{
        title: '序号',
        render: (row: any, k: any, index: number) => <span>{index + 1}</span>,
        width: 80,
        align: 'center'
    }, {
        title:'姓名',
        dataIndex:'fullname'
    },
    {
        title: "手机号",
        dataIndex:'telephone'
    }, {
        title: "身份证号",
        dataIndex:'idno'
    }, {
        title:"最近行程",
        width:'10%',
        render:(row:any)=>{
            return<>
            <Button type="primary" size="small" icon={<SearchOutlined/>} onClick={()=>{
                console.log(row.id)
                dispatch({
                    type:"clientInfo/showItinerary",
                    payload:{
                        data:{id:row.id}
                    }
                })
                // dispatch({
                //     type:"clientInfo/save",
                //     payload:{
                //         showItinerary:true,
                //         showEdit:false
                //     }
                // })
            }}></Button>
            </>
        }
    },{
        title: "编辑",
        width:'10%',
        render:(row:any)=>{
            return <>
            <Button type='primary' size="small" icon={<EditOutlined/>} onClick={()=>{
                dispatch({
                    type: "clientInfo/save",
                    payload: {
                        showEdit:true,
                        isEdit:true,
                        current:row
                    }
                })
            }}></Button>
            </>
        },
    },{
        title:"删除",
        width:'10%',
        render:(row:any)=>{
            return <>
            <Button type='primary' size="small" icon={<CloseSquareOutlined/>} onClick={()=>{
                dispatch({
                    type: "clientInfo/save",
                    payload: {
                        showEdit: false,
                        isEdit:false,
                        current:row,
                        showPop:true
                    }
                })
            }}></Button>
            </>   
        }
    }
    ]
    return (
        <div>
            <PageContainer
                content={intl.formatMessage({
                    id: 'pages.admin.subPage.title',
                    defaultMessage: ' 这个页面只有 admin 权限才能查看',
                })}
                extra={
                    <>
                        <Button type="primary" icon={<ReloadOutlined />} 
                        onClick={()=>{
                            dispatch({
                                type:"clientInfo/loadData",
                                payload:{}
                            })
                        }}/>
                        <Button onClick={() => {
                            dispatch({
                                type: "clientInfo/save",
                                payload: {
                                    showEdit: true,
                                    isEdit:false,
                                    current:{}}
                            })
                        }}>新增</Button>
                        <Button onClick={()=>{
                            dispatch({
                                type:"clientInfo/save",
                                payload:{
                                    showEdit:false,
                                    isEdit:false,
                                    showSearch:true,
                                    current:{}
                                }
                            })
                        }}>查询</Button>
                    </>}
            >
                <Table columns={columns} dataSource={list} rowKey="id"/>
                <EditForm />
                <Search/>
                <Recent/>
                {/* <PopDelete/> */}
            </PageContainer>

        </div>


        // <div>abc</div>
    )
}
export default connect((state: any) => {
    return {
        info: state.clientInfo
    }
})(ClientInfo)
